<template>
	<div class="main">
		<!-- 分屏 -->
		<el-col :span="18" class="streamPlayerContainer">
			<stream-player :url.sync="resultUrl" :text.sync="text"></stream-player>
		</el-col>
		<!-- 事件通知 -->
		<el-col :span="6" class="eventContainer">
			<event></event>
		</el-col>
    </div>
</template>

<script>
	import StreamPlayer from "./StreamPlayer.vue"
	import Event from "./Event.vue"
	import util from '../util/util'
	export default {
		data(){
			return{
				menuLoading:false,
				menuData:[],
				id:"",
				resultUrl:"",
				text:""
			}
		},
        components:{
			// CommonAsideNav,
			StreamPlayer,
			Event
		},
		created(){
			this.id = this.$route.query.id;
		},
		mounted(){
			if(this.id) this.fetchData();
		},
		destroyed(){
		},
		watch:{
			'$route' (to, from) {
				this.id = to.query.id;
				if(this.id) this.fetchData();
            },
		},
		methods:{
			fetchData(){
				this.$api.service.serviceList({service_guid:this.id}).then(response => {
					if(response.data.code=="6000"){
						let data;
						try {	
							data = response.data.data.services;
							console.log(response.data.data)
							if(data.length>0){
								this.resultUrl = data[0]["result_url"];  //data[0]["result_url"].replace("rtmp","http")+".m3u8";  
								this.text = data[0]["channel_name"];
							}else{
								this.resultUrl = "";
								this.text = "";
								this.$message({
									message: "该视频流服务不存在",
									type: 'error'
                        		});
							}
							
						} catch (error) {
							return false;
						}
					}else{
						this.$message({
                            message: util.getErrorInfo(response.data.code),
                            type: 'error'
                        });
					}
				}).catch(error => {
					console.log(error);
				});
			}
		}
	}

</script>

<style scoped lang="scss">
	.main{
		height: 100%;
		.streamPlayerContainer{
			height: 95%;
			padding: 3% 3% 2% 3%;
			
		}
		.eventContainer{
			height: 95%;
			padding: 3% 2% 2% 0;
		}
		
	}
</style>